    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>票务系统</title>
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <link rel="stylesheet" type="text/css" href="css/kui.css">
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<!--        <script type="text/javascript" src="js/extension/dataTool.min.js"></script>-->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<!--        <script type="text/javascript" src="js/extension/bmap.min.js"></script>-->
        <script src="https://cn.vuejs.org/js/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <div id="app">
            <div class="bodyMain">
                <div class="bodyleft">
                    <div class="bodyMain-one">
                        <img src="image/icons.png">
                    </div>
                    <div class="bodyMain-two">
                        <img src="image/icons2.png">
                    </div>
                    <div class="bodyMain-three">
                        <img src="image/icons3.png">
                    </div>
                </div>
                <div class="bodymiddle">
                    <a href="http://dixingulvyou.cn:8000/center/homepage/html/index.html">
                        <span onclick="getby">地心谷指挥中心管理系统</span>
                    </a>
                </div>

                <div class="bodyright">
                    <span>{{date.getFullYear()}}/{{date.getMonth()+1}}/{{date.getDate()}} {{date.getHours()}}:{{a}} {{day}}</span>
                </div>
            </div>
            <div class="txt">
                <p>票务系统</p>
            </div>
            <div class="middle">
                <div class="middle-left">
                    <div class="map">
                        <div class="map-top" style="height: 150px;">
                            <div class="mapleft">
                                <span>今日游客量</span>
                                <div style="width: 400px; height: 60px">
                                    <div class="mapleft-1" v-for = '(item, index) in lists' >{{item}}</div>
                                    <br/>
                                    <br/>
                                    <div class="people">
                                        <span>人</span>
                                    </div>
                                </div>
                            </div>
                            <div class="mapright">
                                <div class="num">
                                    <span class="span-one">昨日游客量</span>&nbsp;&nbsp;<span class="span-two">{{num2}}</span><br/>
                                    <span class="span-one">环比增长</span>&nbsp;&nbsp;<span class="span-two">{{num3}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="map-bottom">
                            <div class="bottom-1">游客来源</div>
                            <div class="bottom-2">
                                <div id="container1" style="height: 200px ; width: 200px;"></div>
                            </div>
                            <div class="bottom-3">
                                <div id="container2" style="height: 200px ; width: 200px;"></div>
                            </div>
                            <div class="bottom-4">
                                <div id="container3" style="height: 200px ; width: 200px;"></div>
                            </div>
                        </div>
                    </div>
                    <div class="text">
                        <div class="textone">
                            <h4>旅客来源省份</h4>
                            <div v-for="(item,index) in source[0]">
                                <h5>{{item}}<progress id="progress" :value="source[1][index]" max="100" ></progress></h5>
                            </div>
                        </div>
                        <div class="texttwo" >
                            <h4>旅游团信息</h4>
                            <div style="width: 260px;height: 30px;background-color: #0e2b59;margin-top: -10px">
                                <span>预定时间 &nbsp;&nbsp;&nbsp;&nbsp; 旅行团 &nbsp;&nbsp;&nbsp;&nbsp; 人数</span>
                            </div>
                            <div class="scrollbar" style="height: 140px; overflow:hidden;overflow-y: auto;">
                                <div style="width: 260px;height: 30px; " v-for="(item,index) in Tour">
                                    <div style="width: 260px;" class="date">
                                        <div style="width: 100px;float:left;">
                                            <span>{{item[0].time}}</span>
                                        </div>
                                        <div style="width: 100px;float:left;" class="date2">
                                            <span>{{item[0].name}}</span>
                                        </div>
                                        <div style="width: 60px;float:left;">
                                            <span style="margin-left: 15px">{{item[0].number}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="textthree">
                            <h4>闸机对应景点情况</h4>
                            <div style="width: 320px;height: 30px;background-color: #0e2b59;margin-top: -10px">
                                <span>闸机 &nbsp;&nbsp; 景点 &nbsp;&nbsp; 旅行人数 &nbsp;&nbsp; 未刷人数</span>
                            </div>
                            <div style="width: 320px">
                                <div style="width: 320px;" class="spots" v-for = '(item, index) in zhaji' >
                                    <div style="width: 50px;float:left;">
                                        <span>{{item[0]}}</span>
                                    </div>
                                    <div style="width: 80px;float:left;">
                                        <span>{{item[1]}}</span>
                                    </div>
                                    <div style="width: 100px;float:left;">
                                        <span>{{item[2]}}</span>
                                    </div>
                                    <div style="width: 80px;float:left;">
                                        <span>{{item[3]}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="middle-middle"></div>
                <div class="order-right" style="z-index: 5000">
                    <button onclick="getby()">本月</button>
                    <button onclick="getthree()">近三个月</button>
                    <button onclick="getsix()">近半年</button>
                    <button class="fix" onclick="getwhole()">今年</button>
                    <button class="fix" onclick="getlast()">去年</button>
                </div>
                <div class="middle-right">
                    <div class="histogram">
                        <div id="main" style="margin: 0 auto;width: 100%; height: 340px;color: white"></div>
                    </div>
                    <hr style="border: 2px solid #243163">
                    <div class="mix">
                        <div class="mix-1">
                            <div id="container4" style="width: 230px;height: 200px"></div>
                        </div>
                        <div class="mix-2">
                            <div id="container5" style="width: 230px;height: 200px"></div>
                        </div>
                        <div class="mix-3">
                            <div id="container6" style="width: 350px;height: 200px"></div>
                        </div>
                    </div>
                    <hr style="border: 2px solid #243163">
                    <div class="lineChart">
                        <div class="lineChart-1">
                            <div id="container7" style="width: 100%;height: 267px"></div>
                        </div>
                        <div class="lineChart-2">
                            <div id="container8" style="width: 100%;height: 267px"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
            var inter = new Vue({
                el: "#app",
                data: {
                    num1:'',
                    num2:'',
                    num3:'',
                    lists:[],
                    zhaji:[],
                    Tour:[],
                    source:[],
                    idx:[0,1,2,3,4],
                    date:new Date(),
                    day:'',
                    a:new Date().getMinutes()
                },
                methods: {
                    getNum: function () {
                        var a = this;
                        axios.get("http://58.52.198.120:8000/tic_from_num.php")
                            .then(function (res) {
                                // console.log(res)
                                a.num1 = res.data.num;
                                a.lists = a.num1.toString().split('');
                                a.num2 = res.data.yesterday_num;
                                a.num3 = res.data.rate
                                // console.log(a.num2)
                                // console.log(a.lists)
                            }, function (err) {
                                console.log(err);
                            })
                    },
                    getGate: function () {
                        var a = this;
                        axios.get("http://58.52.198.120:8000/tic_spot_num.php")
                            .then(function (result) {
                                // console.log(result.data)
                                a.zhaji = result.data
                            }, function (err) {
                                console.log(err);
                            })
                    },
                    getTour: function () {
                        var a = this;
                        axios.get("http://58.52.198.120:8000/tic_team.php")
                            .then(function (result) {
                                a.Tour = result.data;
                                // console.log(a.Tour)
                            }, function (err) {
                                console.log(err);
                            })

                    },
                    getsource:function () {
                        var a = this;
                        axios.get("http://58.52.198.120:8000/tic_from_province.php")
                            .then(function (result) {
                                a.source = result.data
                                // console.log(a.source)
                            }, function (err) {
                                console.log(err);
                            })
                    }
                },
                created() {
                    this.getNum();
                    this.getGate();
                    this.getTour();
                    this.getsource();
                    console.log(this.date.getMinutes())
                    if (this.a<10)
                        {this.a="0" + this.a}
                        // return a
                    if(this.date.getDay()===0){
                        this.day = '星期天'
                    }else if(this.date.getDay()===1){
                        this.day = '星期一'
                    }else if(this.date.getDay()===2){
                        this.day = '星期二'
                    }else if(this.date.getDay()===3){
                        this.day = '星期三'
                    }else if(this.date.getDay()===4){
                        this.day = '星期四'
                    }else if(this.date.getDay()===5){
                        this.day = '星期五'
                    }else if(this.date.getDay()===6){
                        this.day = '星期六'
                    }
                }
            })
        </script>
        <script type="text/javascript">
            var dom = document.getElementById("container1");
            var myChart = echarts.init(dom);
            var app = {};
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_from.php",false);
            xmlhttp.send();
            var a = xmlhttp.responseText.slice(2,xmlhttp.responseText.indexOf(']')).replace(/"/g,'').split(',');
            var b = JSON.parse(xmlhttp.responseText.slice(xmlhttp.responseText.lastIndexOf('['),xmlhttp.responseText.lastIndexOf(']')));
            option = null;
            option = {
                title: {
                    text: eval("'" + a[0] + "'"),
                    left:45,
                    bottom:30,
                    textStyle:{
                        fontSize:14,
                        color:'white'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    itemHeight:1,
                    itemWidth:5,
                    right:20,
                    top: 60,
                    data: ['18岁以下', '18-45岁', '45-69岁', '69岁以上'],
                    textStyle:{
                        color:'#2dbde0',
                        fontSize:12,
                    }
                },
                series: [
                    {
                        type: 'pie',
                        radius: ['20%', '35%'],
                        center:['30%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: b[0].below_eighteen, name: '18岁以下',itemStyle:{color:'#cac401'}},
                            {value: b[0].eighteen_fortyfive, name: '18-45岁',itemStyle:{color:'#04e0f9'}},
                            {value: b[0].fortyfive_sixtynine, name: '45-69岁',itemStyle:{color:'#1c7ef6'}},
                            {value: b[0].over_sixtynine, name: '69岁以上',itemStyle:{color:'#d02d43'}}
                        ]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
        <script type="text/javascript">
            var dom = document.getElementById("container2");
            var myChart = echarts.init(dom);
            var app = {};
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_from.php",false);
            xmlhttp.send();
            var a = xmlhttp.responseText.slice(2,xmlhttp.responseText.indexOf(']')).replace(/"/g,'').split(',');
            var b = JSON.parse(xmlhttp.responseText.slice(xmlhttp.responseText.lastIndexOf('['),xmlhttp.responseText.lastIndexOf(']')));
            option = null;
            option = {
                title: {
                    text: eval("'" + a[1] + "'"),
                    left:0,
                    bottom:30,
                    textStyle:{
                        fontSize:14,
                        color:'white'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    itemHeight:1,
                    itemWidth:5,
                    right:20,
                    top: 60,
                    data: ['18岁以下', '18-45岁', '45-69岁', '69岁以上'],
                    textStyle:{
                        color:'#2dbde0',
                        fontSize:12,
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['20%', '35%'],
                        center:['30%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: b[1].below_eighteen, name: '18岁以下',itemStyle:{color:'#cac401'}},
                            {value: b[1].eighteen_fortyfive, name: '18-45岁',itemStyle:{color:'#04e0f9'}},
                            {value: b[1].fortyfive_sixtynine, name: '45-69岁',itemStyle:{color:'#1c7ef6'}},
                            {value: b[1].over_sixtynine, name: '69岁以上',itemStyle:{color:'#d02d43'}}
                        ]
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
        <script type="text/javascript">
            var dom = document.getElementById("container3");
            var myChart = echarts.init(dom);
            var app = {};
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_from.php",false);
            xmlhttp.send();
            var a = xmlhttp.responseText.slice(2,xmlhttp.responseText.indexOf(']')).replace(/"/g,'').split(',');
            var b = JSON.parse(xmlhttp.responseText.slice(xmlhttp.responseText.lastIndexOf('['),xmlhttp.responseText.lastIndexOf(']')));
            option = null;
            option = {
                title: {
                    text: eval("'" + a[2] + "'"),
                    left:0,
                    bottom:30,
                    textStyle:{
                        fontSize:14,
                        color:'white'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    itemHeight:1,
                    itemWidth:5,
                    right:20,
                    top: 60,
                    data: ['18岁以下', '18-45岁', '45-69岁', '69岁以上'],
                    textStyle:{
                        color:'#2dbde0',
                        fontSize:12,
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['20%', '35%'],
                        center:['30%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: b[2].below_eighteen, name: '18岁以下',itemStyle:{color:'#cac401'}},
                            {value: b[2].eighteen_fortyfive, name: '18-45岁',itemStyle:{color:'#04e0f9'}},
                            {value: b[2].fortyfive_sixtynine, name: '45-69岁',itemStyle:{color:'#1c7ef6'}},
                            {value: b[2].over_sixtynine, name: '69岁以上',itemStyle:{color:'#d02d43'}}
                        ]
                    }
                ]
            };
            ;
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
        <script type="text/javascript">
            var myChart = echarts.init(document.getElementById('main'));
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("POST", "http://58.52.198.120:8000/tic_total_orders.php", false);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

            data = "time=12&select=0";
            xmlhttp.send(data);
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj);
            var option = {
                title: {
                    text: '总订单量',
                    padding: [5, 0, 0, 0],
                    textStyle: {
                        color: '#a9ddee',
                        fontSize: 24,
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}'
                },
                legend: {
                    data: ['订单量', '订单金额'],
                    left: 0,
                    top: 30,
                    textStyle: {
                        color: '#a9ddee'
                    }
                },
                xAxis: {
                    type: 'category',
                    data: obj.time,
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['#434764']
                        }
                    }
                },
                grid: {
                    x: 75,
                    x2: 10,
                    y: 40,
                    y2: 20,
                    top: '20%'
                },
                series: [
                    {
                        name: '订单量',
                        data: obj.order_num
                        ,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#ffce37'
                            }
                        },
                        barWidth: 25
                    },
                    {
                        name: '订单金额',
                        data: obj.order_money,
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                color: '#ff3333'
                            }
                        },
                        barWidth: 25
                    }
                ]
            };
            myChart.setOption(option);
            function getby(e) {
                var myChart = echarts.init(document.getElementById('main'));
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST", "http://58.52.198.120:8000/tic_total_orders.php", false);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                data = "time=1&select=0";
                xmlhttp.send(data);
                var obj = JSON.parse(xmlhttp.responseText)
                // console.log(obj);
                var option = {
                    title: {
                        text: '总订单量',
                        padding: [5, 0, 0, 0],
                        textStyle: {
                            color: '#a9ddee',
                            fontSize: 24,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    legend: {
                        data: ['订单量', '订单金额'],
                        left: 0,
                        top: 30,
                        textStyle: {
                            color: '#a9ddee'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.time,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#434764']
                            }
                        }
                    },
                    grid: {
                        x: 75,
                        y: 40,
                        y2: 20,
                        top: '20%'
                    },
                    series: [
                        {
                            name: '订单量',
                            data: obj.order_num
                            ,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ffce37'
                                }
                            },
                            barWidth: 25
                        },
                        {
                            name: '订单金额',
                            data: obj.order_money,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ff3333'
                                }
                            },
                            barWidth: 25
                        }
                    ]
                };
                myChart.setOption(option);
            };
            function getthree(e) {
                var myChart = echarts.init(document.getElementById('main'));
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST", "http://58.52.198.120:8000/tic_total_orders.php", false);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                data = "time=3&select=0";
                xmlhttp.send(data);
                var obj = JSON.parse(xmlhttp.responseText)
                // console.log(obj);
                var option = {
                    title: {
                        text: '总订单量',
                        padding: [5, 0, 0, 0],
                        textStyle: {
                            color: '#a9ddee',
                            fontSize: 24,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    legend: {
                        data: ['订单量', '订单金额'],
                        left: 0,
                        top: 30,
                        textStyle: {
                            color: '#a9ddee'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.time,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#434764']
                            }
                        }
                    },
                    grid: {
                        x: 75,
                        y: 40,
                        y2: 20,
                        top: '20%'
                    },
                    series: [
                        {
                            name: '订单量',
                            data: obj.order_num
                            ,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ffce37'
                                }
                            },
                            barWidth: 25
                        },
                        {
                            name: '订单金额',
                            data: obj.order_money,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ff3333'
                                }
                            },
                            barWidth: 25
                        }
                    ]
                };
                myChart.setOption(option);
            };
            function getsix(e) {
                var myChart = echarts.init(document.getElementById('main'));
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST", "http://58.52.198.120:8000/tic_total_orders.php", false);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                data = "time=6&select=0";
                xmlhttp.send(data);
                var obj = JSON.parse(xmlhttp.responseText)
                // console.log(obj);
                var option = {
                    title: {
                        text: '总订单量',
                        padding: [5, 0, 0, 0],
                        textStyle: {
                            color: '#a9ddee',
                            fontSize: 24,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    legend: {
                        data: ['订单量', '订单金额'],
                        left: 0,
                        top: 30,
                        textStyle: {
                            color: '#a9ddee'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.time,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#434764']
                            }
                        }
                    },
                    grid: {
                        x: 75,
                        y: 40,
                        y2: 20,
                        top: '20%'
                    },
                    series: [
                        {
                            name: '订单量',
                            data: obj.order_num
                            ,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ffce37'
                                }
                            },
                            barWidth: 25
                        },
                        {
                            name: '订单金额',
                            data: obj.order_money,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ff3333'
                                }
                            },
                            barWidth: 25
                        }
                    ]
                };
                myChart.setOption(option);
            };
            function getwhole(e) {
                var myChart = echarts.init(document.getElementById('main'));
                var xmlhttp;
                if (window.XMLHttpRequest) {
                    xmlhttp = new XMLHttpRequest();
                } else {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.open("POST", "http://58.52.198.120:8000/tic_total_orders.php", false);
                xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                data = "time=12&select=0";
                xmlhttp.send(data);
                var obj = JSON.parse(xmlhttp.responseText)
                // console.log(obj);
                var option = {
                    title: {
                        text: '总订单量',
                        padding: [5, 0, 0, 0],
                        textStyle: {
                            color: '#a9ddee',
                            fontSize: 24,
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b} : {c}'
                    },
                    legend: {
                        data: ['订单量', '订单金额'],
                        left: 0,
                        top: 30,
                        textStyle: {
                            color: '#a9ddee'
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: obj.time,
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#434764']
                            }
                        }
                    },
                    grid: {
                        x: 75,
                        y: 40,
                        y2: 20,
                        top: '20%'
                    },
                    series: [
                        {
                            name: '订单量',
                            data: obj.order_num
                            ,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ffce37'
                                }
                            },
                            barWidth: 25
                        },
                        {
                            name: '订单金额',
                            data: obj.order_money,
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: '#ff3333'
                                }
                            },
                            barWidth: 25
                        }
                    ]
                };
                myChart.setOption(option);
            };
			function getlast(e) {
			    var myChart = echarts.init(document.getElementById('main'));
			    var xmlhttp;
			    if (window.XMLHttpRequest) {
			        xmlhttp = new XMLHttpRequest();
			    } else {
			        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			    }
			    xmlhttp.open("POST", "http://58.52.198.120:8000/tic_total_orders.php", false);
			    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			    data = "time=-12&select=0";
			    xmlhttp.send(data);
			    var obj = JSON.parse(xmlhttp.responseText)
			    // console.log(obj);
			    var option = {
			        title: {
			            text: '总订单量',
			            padding: [5, 0, 0, 0],
			            textStyle: {
			                color: '#a9ddee',
			                fontSize: 24,
			            }
			        },
			        tooltip: {
			            trigger: 'item',
			            formatter: '{b} : {c}'
			        },
			        legend: {
			            data: ['订单量', '订单金额'],
			            left: 0,
			            top: 30,
			            textStyle: {
			                color: '#a9ddee'
			            }
			        },
			        xAxis: {
			            type: 'category',
			            data: obj.time,
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            }
			        },
			        yAxis: {
			            type: 'value',
			            axisLine: {
			                lineStyle: {
			                    color: '#fff'
			                }
			            },
			            splitLine: {
			                lineStyle: {
			                    // 使用深浅的间隔色
			                    color: ['#434764']
			                }
			            }
			        },
			        grid: {
			            x: 75,
			            y: 40,
			            y2: 20,
			            top: '20%'
			        },
			        series: [
			            {
			                name: '订单量',
			                data: obj.order_num
			                ,
			                type: 'bar',
			                itemStyle: {
			                    normal: {
			                        color: '#ffce37'
			                    }
			                },
			                barWidth: 25
			            },
			            {
			                name: '订单金额',
			                data: obj.order_money,
			                type: 'bar',
			                itemStyle: {
			                    normal: {
			                        color: '#ff3333'
			                    }
			                },
			                barWidth: 25
			            }
			        ]
			    };
			    myChart.setOption(option);
			};
        </script>
        <script type="text/javascript">
            var dom = document.getElementById("container4");
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_pay_pie.php",false);
            xmlhttp.send();
            var obj = (JSON.parse(xmlhttp.responseText));
            // console.log(obj)
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                title: {
                    text: '第三方订单',
                    left:35,
                    bottom:5,
                    textStyle:{
                        fontSize:18,
                        color:'white'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right:10,
                    top: 40,
                    itemHeight:9,
                    itemWidth:9,
                    data: [obj[0].payment_channel,obj[1].payment_channel, obj[2].payment_channel, obj[3].payment_channel,obj[4].payment_channel],
                    textStyle:{
                        color:'#fff',
                        fontSize:14,
                    }
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['35%', '55%'],
                        center:['35%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: obj[0].count, name: obj[0].payment_channel,itemStyle:{color:'#ffe99f'}},
                            {value: obj[1].count, name: obj[1].payment_channel,itemStyle:{color:'#cb9cfc'}},
                            {value: obj[2].count, name: obj[2].payment_channel,itemStyle:{color:'#00c486'}},
                            {value: obj[3].count, name: obj[3].payment_channel,itemStyle:{color:'#d6d6d6'}},
                            {value: obj[4].count, name: obj[4].payment_channel,itemStyle:{color:'#666666'}}
                        ]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
        <script type="text/javascript">
            var dom = document.getElementById("container5");
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_offline_online.php",false);
            xmlhttp.send();
            var obj = JSON.parse(xmlhttp.responseText);
            //console.log(obj)
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            option = {
                title: {
                    text: '销售渠道',
                    left:45,
                    bottom:5,
                    textStyle:{
                        fontSize:18,
                        color:'white'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    itemHeight:1,
                    itemWidth:5,
                    right:0,
                    top: 60,
                    itemHeight:9,
                    itemWidth:9,
                    data: [obj[0].payment_channel,obj[1].payment_channel],
                    textStyle:{
                        color:'#fff',
                        fontSize:14,
                    }
                },
                series: [
                    {
                        // name: '访问来源',
                        type: 'pie',
                        radius: ['35%', '55%'],
                        center:['35%','50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: obj[0].count, name: obj[0].payment_channel,itemStyle:{color:'#ffd800'}},
                            {value: obj[1].count, name: obj[1].payment_channel,itemStyle:{color:'#cb9cfc'}},
                        ]
                    }
                ]
            };
            if (option && typeof option === "object") {
                myChart.setOption(option, true);
            }
        </script>
        <script type="text/javascript">
            var myChart=echarts.init(document.getElementById('container6'));
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_pay.php",false);
            xmlhttp.send();
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            var option = {
                title: {
                    text: '支付方式对比',
                    textStyle:{
                        fontSize:18,
                        color:'white'
                    }
                },
                tooltip: {
                    trigger: 'axis',
                },
                grid:{
                    x:50,
                    y:40,
                    y2:25,
                    x2:10
                },
                legend: {
                    data: ['支付宝', '微信端'],
                    right:0,
                    itemHeight:9,
                    itemWidth:9,

                    textStyle:{
                        fontSize:14,
                        color:'white'
                    }
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        data: obj.time,
                        axisLine:{
                            lineStyle:{
                                color:'#fff',
                                fontSize:12
                            }
                        },
                        // axisLabel: {
                        //     interval:0,//代表显示所有x轴标签显示
                        // }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}',
                            fontSize:12
                        },
                        splitLine: {
                            lineStyle: {
                                // 使用深浅的间隔色
                                color: ['#2a2f50']
                            }
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#fff'
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '微信端',
                        type: 'bar',
                        data: obj.wechat,
                        barWidth:'12',
                        itemStyle:{
                            normal:{
                                color:'#cb9cfc'
                            }
                        }
                    },
                    {
                        name: '支付宝',
                        type: 'bar',
                        data: obj.alipay,
                        barWidth:'12',
                        itemStyle:{
                            normal:{
                                color:'#ffd800'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        </script>
        <script type="text/javascript">
            var myChart=echarts.init(document.getElementById('container7'));
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_hots.php",false);
            xmlhttp.send();
            var a = xmlhttp.responseText.slice(2,xmlhttp.responseText.indexOf(']')).replace(/"/g,'').split(',');
            var b = xmlhttp.responseText.slice(xmlhttp.responseText.indexOf('{'),xmlhttp.responseText.indexOf('}')+1);
            // console.log(JSON.parse(b))
            // console.log(Object.keys(JSON.parse(b)))
            var arr = [];
            var newarr = ['#CD3333','#CD6090','#B452CD','#87CEFA','#4169E1','#00EE00','#87CEEB','#EEEE00','#FF6A6A','#FFBBFF'];
            for (var i=0;i<Object.keys(JSON.parse(b)).length;i++){
                arr.push({
                    name: Object.keys(JSON.parse(b))[i],
                    type: 'line',
                    itemStyle : {
                        normal : {
                            lineStyle:{
                                color:newarr[i],
                            }
                        }
                    },
                    symbol:'circle',
                    symbolSize:10,
                    data: JSON.parse(b)[Object.keys(JSON.parse(b))[i]],
                    smooth:true
                })
            }
            // console.log(arr)
            var option = {
                title: {
                    text: '景点热度',
                    // padding: [5,0,0,10],
                    textStyle:{
                        color:'#a9ddee',
                        fontSize:24
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: Object.keys(JSON.parse(b)),
                    itemWidth:0,
                    left:150,
                    top: 0,
                    textStyle:{
                        color:'#fff',
                        fontSize:12
                    }
                },
                grid: {
                    top:'20%',
                    left: '3%',
                    right: '4%',
                    bottom: '5%',
                    x2: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: a,
                    axisLine:{
                        lineStyle:{
                            color:'#fff',
                            fontSize:12
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine:{
                        lineStyle:{
                            color:'#fff'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['#003c98']
                        }
                    }
                },
                series: arr ,
            };
            myChart.setOption(option)
        </script>
        <script type="text/javascript">
            var myChart=echarts.init(document.getElementById('container8'));
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
            }
            else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.open("GET","http://58.52.198.120:8000/tic_inparktime.php",false);
            xmlhttp.send();

            var a = xmlhttp.responseText.slice(xmlhttp.responseText.indexOf('[')+1,xmlhttp.responseText.indexOf(']')).replace(/"/g,'').split(',');

            // console.log(a)
            // console.log(xmlhttp.responseText)
            var b = xmlhttp.responseText.slice(xmlhttp.responseText.lastIndexOf('[')+1,xmlhttp.responseText.lastIndexOf(']')).replace(/"/g,'').split(',');
            var time=new Array();
            for(var i=0;i<b.length;i++){
                time.push(b[i]+'时');
            }
            // console.log(time)
            // console.log(b)
            option = {
                title: {
                    text: '入园高峰期',
                    textStyle:{
                        color:'#a9ddee',
                        fontSize:24
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}'
                },
                xAxis: {
                    type: 'category',
                    data: a,
                    axisLine:{
                        lineStyle:{
                            color:'#fff',
                            fontSize:12
                        }
                    }
                },
                yAxis: {
                    type: 'category',
                    data:['8-10时','10-12时','12-14时','14-16时','16-18时','18-20时'],
                    // axisLabel: {
                    //     formatter:function (value, index) {
                    //         var result="";
                    //         switch(value){
                    //             case 0:result="8-10";break;
                    //             case 1:result="10-12";break;
                    //             case 2:result="12-14";break;
                    //             case 3:result="14-16";break;
                    //             case 4:result="16-18";break;
                    //             case 5:result="18-20";break;
                    //             case 6:result="20-22";break;
                    //             default:"-";
                    //         }
                    //         return result;
                    //     }
                    // },
                    axisLine:{
                        lineStyle:{
                            color:'#fff'
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ['#003c98']
                        }
                    }
                },
                grid:{
                    x:55,
                    y:50,
                    y2:35,
                    x2:10
                },
                series: [{
                    data: time,
                    type: 'line',
                    symbol:'circle',
                    symbolSize:10,
                    smooth:true,
                    itemStyle: {
                        normal: {
                            color: '#87f8ff', //改变折线点的颜色
                            lineStyle: {
                                color: '#338799' //改变折线颜色
                            }
                        }
                    }
                }]
            };
            myChart.setOption(option)
        </script>
    </body>
    </html>
